<template>
	<view class="index">
		<!-- scroll-into-view为头部选项的定位位置 -->
		<scroll-view scroll-x="true" class="scroll-content" :scroll-into-view="scrollIntoIndex">
			<!-- scroll-into-view根据动态id值来定位，注意此处的id不能以数字开头 -->
			<view 
			:id="'top' + index"
			class="scroll-item" 
			v-for="(item,index) in topBar" 
			:key="index"
			@tap="changTab(index)"
			>
				<text :class='topBarIndex === index? "f-active-color":"f-color"'>{{item.name}}</text>
			</view>
		</scroll-view>
		<!-- current改变时触发change -->
		<!-- current动态赋值top导航的下标 -->
		<swiper @change="onchangeTab" :current="topBarIndex" :style="'height:' + clentHeight + 'px;'">
			<swiper-item v-for="(item,index) in newTopBar" :key="index">
				<!-- <view class="swiper-item">{{item.name}}</view> -->
				<scroll-view scroll-y="true" :style="'height:' + clentHeight + 'px;'" @scrolltolower="loadMore(index)">
					<block v-if="item.data.length > 0">
						<block v-for="(k,i) in item.data" :key="i">
							<index-swiper v-if="k.type==='swiperList'" :dataList="k.data"></index-swiper>
							<!-- A1 -->
							<template v-if="k.type==='recommendList'">
								<Recommend :dataList="k.data"></Recommend>
								<Card cardTitle="猜你喜欢"></Card>
							</template>
							
							<!-- 其他 -->
							<!-- B2 -->
							<banner v-if="k.type==='bannerList'" :dataList='k.imgUrl'></banner>
							<template v-if="k.type==='iconsList'">							
								<icons :dataList='k.data'></icons>
								<Card cardTitle="AAIA"></Card>
							</template>
							<!-- C3 -->
							<template v-if="k.type==='hotList'">
								<Hot :dataList='k.data'></Hot>						
								<Card cardTitle="BBIB"></Card>
							</template>
							<!-- D4 -->
							<template v-if="k.type==='shopList'">
								<Shop :dataList='k.data'></Shop>						
								<Card cardTitle="CCIC"></Card>
							</template>

							<commondity-list v-if="k.type==='commondityList'" :dataList="k.data"></commondity-list>						
						
						</block>
					</block>
					<view v-else>
						暂无数据....
					</view>
					<view class="load-text f-color">
						{{item.loadText}}
					</view>
				</scroll-view>
					
				
			</swiper-item>
			
		</swiper>
		
		
		<!-- 推荐 -->
		<!-- <index-swiper></index-swiper>
		<Recommend></Recommend>
		<Card cardTitle="猜你喜欢"></Card>
		<commondity-list></commondity-list> -->
		
		<!-- 其他 -->
		<!-- <banner></banner>
		<icons></icons>
		<Card cardTitle="AAIA"></Card>
		<Hot></Hot>
		
		<Card cardTitle="BBIB"></Card>
		<Shop></Shop>
		
		<Card cardTitle="CCIC"></Card>
		<commondity-list></commondity-list> -->
	</view>
</template>

<script>
	import IndexSwiper from "@/components/index/indexSwiper.vue"
	import Recommend from "@/components/index/Recommend.vue"
	import Card from "@/components/common/Card.vue"
	import CommondityList from "@/components/common/CommondityList.vue"
	import Banner from "@/components/index/Banner.vue"
	import Icons from "@/components/index/Icons.vue"
	import Hot from "@/components/index/Hot.vue"
	import Shop from "@/components/index/Shop.vue"
	import http from "@/common/api/request.js"
	export default {
		components:{
			IndexSwiper,
			Recommend,
			Card,
			CommondityList,
			Banner,
			Icons,
			Hot,
			Shop
		},
		data() {
			return {
				topBarIndex:0,
				scrollIntoIndex:'top0',
				topBar:[],
				clentHeight:0,
				// 承载数据
				newTopBar:[]
			}
		},
		onLoad() {
			this.init()
		},
		onReady() {
			uni.getSystemInfo({
				success: (res) => {		//可视区域为自定义的top导航栏高度-设备状态栏高度
					this.clentHeight = res.windowHeight - uni.upx2px(80) - this.getClientHeight()
				}
			})
			// // 获取所对应类的总高度
			// let view = uni.createSelectorQuery().select(".home-data");
			// view.boundingClientRect(data =>{
			// 	// this.clentHeight = data.height
			// 	this.clentHeight = 1000
			// }).exec();
		},
		onNavigationBarButtonTap(e) {
			if(e.float == 'left'){
				uni.navigateTo({
					url:'/pages/search/search'
				})
			}
		},
		methods: {
			//兼容可视区获取
			getClientHeight(){
				const res = uni.getSystemInfoSync();
				console.log(res.platform,res.statusBarHeight);
				const system = res.platform
				if(system === 'ios'){
					return 44+res.statusBarHeight
				}else if(system === 'android'){
					return 48+res.statusBarHeight
				}else{	//小程序则不用返回
					return 0
				}
			},
			init(){
				
				http.request({
					url:"/index_list/data"
				}).then( (res) => {
					this.topBar = res.topBar
					this.newTopBar = this.initData(res)
				}).catch( () =>{
					uni.showToast({
						title:'请求失败',
						icon:"none"
					})
				})
				// uni.request({
				// 	url:'http://192.168.31.150:3000/api/index_list/data',
				// 	success: (res) => {
				// 		let data = res.data.data
				// 		this.topBar = data.topBar
				// 		this.newTopBar = this.initData(data)
				// 	}
				// })
			},
			initData(res){
				let arr = []
				for(let i=0; i<this.topBar.length; i++){
					let obj = {
						data:[],
						load:"first",
						loadText:"上拉加载更多···"
					}
					if(i==0){
						obj.data = res.data
					}
					arr.push(obj)
				}
				return arr
			},
			// top导航的选中状态
			changTab(index){
				if(this.topBarIndex === index){
					return
				}
				this.topBarIndex = index
				// top导航的定位
				this.scrollIntoIndex = 'top' + index
				
				//显示不同数据//数据标记为first则执行请求，上面已将所有数据初始值默认为first
				if(this.newTopBar[this.topBarIndex].load === "first"){
					this.addData()
				}
				
			},
			onchangeTab(e){
				// 根据swiper滑块绑定top导航的下标
				this.changTab(e.detail.current)
			},
			//对应显示不同数据
			addData(callback){
				// 拿到索引
				let index = this.topBarIndex
				// 根据索引获取id
				let id = this.topBar[index].id
				
				let page = Math.ceil(this.newTopBar[index].data.length / 5) + 1
				console.log(page);
				
				http.request({
					url:'/index_list/'+ id +'/data/'+ page
				}).then((res)=>{
					this.newTopBar[index].data = [...this.newTopBar[index].data,...res]
				}).catch(()=>{
					uni.showToast({
						title:'没有更多了',
						icon:"none"
					})
				})
				
				//请求不同数据
				// uni.request({
				// 	url:'http://192.168.31.150:3000/api/index_list/'+ id +'/data/'+ page,
				// 	success: (res) => {
				// 		if(res.statusCode != 200){
				// 			return
				// 		}else{
				// 			let data = res.data.data
				// 			this.newTopBar[index].data = [...this.newTopBar[index].data,...data]
				// 		}
						
				// 	}
				// })
				
				//给已经浏览过的区块赋值标记，处理其下次不需重新请求数据
				this.newTopBar[index].loda='last'
				if(typeof callback === 'function'){
					callback()
				}
			},
			loadMore(index){
				
					this.newTopBar[index].loadText = '加载中···'
				
				this.addData(()=>{
					this.newTopBar[index].loadText = '没有更多了···'
				})
			}
		}
	}
</script>

<style scoped>
.scroll-content{
	width: 100%;
	height: 80rpx;
	white-space: nowrap;
}
.scroll-item{
	display: inline-block;
	padding: 10rpx 30rpx;
	font-size: 32rpx;
}
.f-active-color{
	padding: 10rpx 0;
	border-bottom: 6rpx solid #49bdfb;
}
.load-text{
	line-height: 60rpx;
	text-align: center;
}
</style>
